/* Main wrapper */
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;

  // Global buzz text color class
  :global(.text-buzz) {
    color: rgb(var(--buzz-color)) !important;
  }
  // Mobile improvements for better readability
  @media (max-width: theme('screens.xs')) {
    padding: var(--mantine-spacing-xs);

    .mantine-Stack-root {
      gap: var(--mantine-spacing-sm);
    }

    .mantine-Card-root {
      padding: var(--mantine-spacing-sm) !important;
      margin-bottom: var(--mantine-spacing-sm);
    }

    .mantine-Text-root {
      line-height: 1.4;
    }

    .mantine-Button-root {
      height: 44px;
      font-size: var(--mantine-font-size-sm);
    }

    .mantine-Group-root {
      gap: var(--mantine-spacing-xs);
    }
  }
}

/* Message card styling */
.messageCard {
  background: light-dark(
    rgba(var(--mantine-color-blue-2-rgb), 0.3),
    rgba(var(--mantine-color-blue-8-rgb), 0.2)
  );
  border: 1px solid light-dark(
    var(--mantine-color-blue-3),
    var(--mantine-color-blue-7)
  );
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  @media (max-width: theme('screens.xs')) {
    padding: var(--mantine-spacing-sm) !important;
  }
}

/* Gift Card Promo - Clean and Eye-catching */
.giftCardPromo {
  background: linear-gradient(135deg,
    rgb(var(--buzz-color)) 0%,
    rgba(var(--buzz-color), 0.8) 100%);
  border: 2px solid rgb(var(--buzz-color));
  box-shadow: 0 4px 20px rgba(var(--buzz-color), 0.25);
  @media (max-width: theme('screens.md')) {
    padding: var(--mantine-spacing-md) !important;
  }
}

.giftCardButtons {
  margin-left: auto;

  @media (max-width: theme('screens.md')) {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

.giftCardLayout {
  display: flex;
  justify-content: space-between;
  align-items: center;

  @media (max-width: theme('screens.md')) {
    flex-direction: column;
    gap: var(--mantine-spacing-md);
    align-items: stretch;
  }
}

.giftCardContent {
  flex: 1;
  min-width: 0;

  @media (max-width: theme('screens.md')) {
    justify-content: center;
    text-align: center;
  }
}

.giftCardBackground {
  position: relative;
  z-index: 1;
}

.giftCardTitle {
  color: var(--mantine-color-dark-9);
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);

  @media (max-width: theme('screens.xs')) {
    font-size: 1rem;
  }
}

.giftCardSubtitle {
  color: var(--mantine-color-dark-7);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.giftIconWrapper {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  padding: var(--mantine-spacing-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;

  @media (max-width: theme('screens.xs')) {
    display: none;
  }
}

.giftIcon {
  color: rgb(var(--buzz-color));
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.giftCardCta {
  background: white;
  color: rgb(var(--buzz-color)) !important;
  text-decoration: none !important;
  font-weight: 600;
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
  border-radius: var(--mantine-radius-sm);
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.95);
  }

  @media (max-width: theme('screens.xs')) {
    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
    font-size: var(--mantine-font-size-xs);
  }
}

.giftCardLearnMore {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: underline !important;
  font-weight: 500;
  padding: var(--mantine-spacing-sm);
  transition: all 0.2s ease;

  &:hover {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  @media (max-width: theme('screens.xs')) {
    padding: var(--mantine-spacing-xs);
    font-size: var(--mantine-font-size-xs);
  }
}

/* Header section */
.headerCard {
  background: var(--buzz-gradient);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  box-shadow:
    0 4px 20px rgba(var(--buzz-color), 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  .title {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .subtitle {
    color: rgba(255, 255, 255, 0.95);
  }
}

.trustBadge {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}

/* Package selection */
.packagesGrid {
  gap: var(--mantine-spacing-xs);
}

.packageSection {
  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
  box-shadow: light-dark(0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.5));
}

.packageCard {
  position: relative;
  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
  border: 1px solid light-dark(rgba(var(--buzz-color), 0.3), rgba(var(--buzz-color), 0.6));
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 140px;

  &:hover {
    border-color: light-dark(rgba(var(--buzz-color), 0.6), rgba(var(--buzz-color), 0.8));
    transform: translateY(-2px);
    box-shadow: light-dark(0 4px 12px rgba(var(--buzz-color), 0.15), 0 4px 12px rgba(var(--buzz-color), 0.3));
  }

  &.selected {
    border-color: rgb(var(--buzz-color));
    background: linear-gradient(135deg, rgba(var(--buzz-color), 0.1) 0%, rgba(var(--buzz-color), 0.3) 1%, light-dark(var(--mantine-color-white), var(--mantine-color-dark-7)) 1%);
    box-shadow: 0 0 0 2px rgb(var(--buzz-color)), light-dark(0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.5));
  }

  &.packageCardDisabled {
    opacity: 0.5;
    cursor: not-allowed;

    &:hover {
      transform: none;
      border-color: light-dark(rgba(var(--buzz-color), 0.3), rgba(var(--buzz-color), 0.6));
    }
  }

  &.packageCardPopular {
    border-color: var(--mantine-color-orange-6);
  }
}

.packageBuzzAmount {
  color: rgb(var(--buzz-color));
  font-weight: 700;
}

.packagePrice {
  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-3));
  font-weight: 600;
}

.bonusBadge {
  background: var(--buzz-gradient);
  color: white;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 2px 8px rgba(var(--buzz-color), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.popularBadge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* Custom amount accordion */
.customAmountCard {
  background: light-dark(
    linear-gradient(135deg, rgba(var(--buzz-color), 0.05) 0%, var(--mantine-color-white) 100%),
    linear-gradient(135deg, var(--mantine-color-dark-7) 0%, var(--mantine-color-dark-6) 100%)
  );
  border: 1px solid light-dark(rgba(var(--buzz-color), 0.2), rgba(var(--buzz-color), 0.6));
}

.customAmountAccordion {
  border: none;
  border-radius: var(--mantine-radius-md);
}

/* Bulk benefits */
.bulkBenefitsCard {
  background: light-dark(
    linear-gradient(135deg, var(--mantine-color-blue-0) 0%, var(--mantine-color-white) 100%),
    linear-gradient(135deg, var(--mantine-color-dark-7) 0%, var(--mantine-color-dark-6) 100%)
  );
  border: 1px solid light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-6));
}

/* Payment section */
.paymentSection {
  background: light-dark(
    linear-gradient(135deg, var(--mantine-color-gray-0) 0%, var(--mantine-color-white) 100%),
    linear-gradient(135deg, var(--mantine-color-dark-7) 0%, var(--mantine-color-dark-6) 100%)
  );
  border: 1px solid light-dark(rgba(var(--buzz-color), 0.2), rgba(var(--buzz-color), 0.6));
  // Mobile improvements
  @media (max-width: theme('screens.xs')) {
    padding: var(--mantine-spacing-sm) !important;

    .mantine-Group-root {
      flex-direction: column;
      align-items: stretch;
      gap: var(--mantine-spacing-sm);
    }

    .mantine-Button-root {
      width: 100%;
      justify-content: center;
    }

    .mantine-Divider-root {
      margin: var(--mantine-spacing-sm) 0;
    }
  }
}

.bonusBreakdown {
  background: light-dark(
    linear-gradient(135deg, rgba(var(--buzz-color), 0.08) 0%, rgba(var(--buzz-color), 0.02) 100%),
    linear-gradient(135deg, var(--mantine-color-dark-8) 0%, var(--mantine-color-dark-7) 100%)
  );
  border: 1px solid light-dark(rgba(var(--buzz-color), 0.15), rgba(var(--buzz-color), 0.3));

  // Mobile improvements
  @container (max-width: theme('screens.md')) {
    padding: var(--mantine-spacing-sm) !important;
  }
}

// Removed old complex benefit breakdown styles - now using simpler inline styles

.membershipInfo {
  // Mobile membership info
  @container (max-width: theme('screens.xs')) {
    padding: var(--mantine-spacing-sm);
    margin: var(--mantine-spacing-sm) 0;

    .mantine-Group-root {
      flex-direction: column;
      align-items: stretch;
      gap: var(--mantine-spacing-sm);
    }

    .mantine-ThemeIcon-root {
      align-self: center;
    }
  }
}

.totalBuzzValue {
  // Mobile total value display
  @container (max-width: theme('screens.xs')) {
    margin-top: var(--mantine-spacing-sm);
    padding-top: var(--mantine-spacing-sm);
    border-top: 1px solid var(--mantine-color-gray-3);
    text-align: center;

    @media (prefers-color-scheme: dark) {
      border-top-color: var(--mantine-color-dark-4);
    }

    .mantine-Group-root {
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--mantine-spacing-xs);
    }
  }
}

.membershipBenefitsCard {
  background: linear-gradient(135deg, rgba(var(--buzz-color), 0.05) 0%, rgba(var(--buzz-color), 0.1) 100%);
  border: 1px solid rgba(var(--buzz-color), 0.3);

  @media (prefers-color-scheme: dark) {
    background: linear-gradient(135deg, var(--mantine-color-dark-7) 0%, var(--mantine-color-dark-6) 100%);
    border: 1px solid rgba(var(--buzz-color), 0.6);
  }
}

.benefitsTitle {
  color: rgb(var(--buzz-color));

  @media (prefers-color-scheme: dark) {
    color: rgb(var(--buzz-color));
  }
}

.benefitsBreakdown {
  display: flex;
  flex-direction: column;
  gap: var(--mantine-spacing-xs);
}

.benefitCard {
  background: var(--mantine-color-white);
  border: 1px solid var(--mantine-color-gray-2);

  @media (prefers-color-scheme: dark) {
    background: var(--mantine-color-dark-8);
    border: 1px solid var(--mantine-color-dark-4);
  }
}

.totalAmount {
  color: rgb(var(--buzz-color));
}

/* Links */
.giftCardLink {
  color: rgb(var(--buzz-color));
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.cryptoLink {
  color: rgb(var(--buzz-color));
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

/* Cancel button */
.cancelButton {
  margin-top: var(--mantine-spacing-xs);
}

/* Selection prompt for when no package/amount is selected */
.selectionPrompt {
  background: light-dark(rgba(var(--buzz-color), 0.05), var(--mantine-color-dark-7));
}

/* Bulk benefits styling */
.bulkTable {
  .bulkRow {
    border-radius: var(--mantine-radius-sm);
    border: 1px solid light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-5));
    transition: all 0.2s ease;

    &:hover {
      background: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-7));
      border-color: light-dark(var(--mantine-color-blue-3), var(--mantine-color-blue-7));
    }

    // Mobile responsive
    @media (max-width: theme('screens.xs')) {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--mantine-spacing-sm);

      .mantine-Group-root {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: var(--mantine-spacing-xs);
      }

      .mantine-Badge-root {
        align-self: flex-end;
        margin-top: var(--mantine-spacing-xs);
      }
    }
  }
}

// Remove old bulk benefit styles that are no longer needed
.bulkBenefitsContainer {
  @container (max-width: theme('screens.xs')) {
    gap: var(--mantine-spacing-xs);
  }
}

.bulkBenefitRow {
  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
  border: 1px solid light-dark(var(--mantine-color-blue-2), var(--mantine-color-dark-5));
  transition: all 0.2s ease;

  &:hover {
    border-color: light-dark(var(--mantine-color-blue-4), var(--mantine-color-blue-7));
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    @media (prefers-color-scheme: dark) {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
  }

  @container (max-width: theme('screens.xs')) {
    .mantine-Group-root {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--mantine-spacing-sm);
    }
  }
}

.bulkBenefitInfo {
  flex: 1;

  @container (max-width: theme('screens.xs')) {
    width: 100%;

    .mantine-Group-root {
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: var(--mantine-spacing-xs);
    }
  }
}

.bulkBenefitBadge {
  @container (max-width: theme('screens.xs')) {
    align-self: flex-end;
  }
}
